<template>
  <div class="xtx-home-page">
    <div class="container">
      <!-- 分类区域 -->
      <HomeCategory />
      <!-- 轮播图区域 -->
      <XtxCarousel :sliders="sliders" />
    </div>
    <!-- 新鲜好物 -->
    <HomeNew />
    <!-- 人气推荐 -->
    <HomeHot />
  </div>
</template>

<script>
import HomeCategory from './components/home-category.vue'
import HomeNew from './components/home-new.vue'
import HomeHot from './components/home-hot.vue'
// 导入接口
import { findBanner } from '../../api/home'
// 导入 辅助函数
import { reactive } from 'vue'
export default {
  name: 'xtx-home-page',
  components: {
    HomeCategory,
    HomeNew,
    HomeHot
  },
  setup () {
    // 响应式的数据
    const sliders = reactive([])
    // 准备一个响应式的数据
    findBanner().then(res => {
      // 会更改数据的响应式特性
      sliders.push(...res.result)
    })

    // 返回数据
    return {
      sliders
    }
  }
}
</script>

<style scoped lang="less"></style>
